import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import { Empty, Modal, Button, Spin, Tooltip, message } from 'antd';
import copyToClipboard from '@util/copy-to-clipboard';
import _ from 'lodash';
import { List } from 'react-virtualized';
import './index.less';
import copyImg from '@images/new_copy.svg';

class TargetCard extends React.Component {
  static propTypes = {
    name: PropTypes.string,
    items: PropTypes.array,
    moreItems: PropTypes.array,
    className: PropTypes.string,
    isCron: PropTypes.bool,
    loadingMore: PropTypes.bool,
    loadMore: PropTypes.func,
    type: PropTypes.string
  };
  constructor(props) {
    super(props);
    this.state = {
      moreModalVisible: false
    };
  }

  Copy = () => {
    let moreItems = this.props.moreItems;
    this.props.type === 'target'
      ? (moreItems = moreItems.join('\n'))
      : (moreItems = moreItems.join(','));
    const res = copyToClipboard(moreItems);
    res ? message.success('复制成功') : message.error('复制失败');
  };

  renderMoreItemRow = ({ index, key, style }) => {
    let item = _.get(this.props.moreItems, index) || '-';
    style.width = 'auto';
    style.marginLeft = '100px';
    style.paddingBottom = '8px';

    return (
      <Tooltip title={item} key={key}>
        <div style={style}>
          <div className="item">{item}</div>
        </div>
      </Tooltip>
    );
  };
  renderMoreItems = () => {
    return (
      <>
        <img src={copyImg} className={'copy-img'} onClick={this.Copy} />
        <List
          width={472}
          height={230}
          rowCount={_.get(this.props.moreItems, 'length', 0)}
          rowRenderer={this.renderMoreItemRow}
          rowHeight={33}
          overscanRowCount={10}
        />
      </>
    );
  };
  renderItems = () => {
    return this.props.items.map((item, index) => {
      return (
        <Tooltip key={index} title={item}>
          <div className="item">{item}</div>
        </Tooltip>
      );
    });
  };
  renderEmpty = () => {
    const isCron = this.props.isCron;
    return (
      <div className={cn('empty', { cronjob: isCron })}>
        {isCron ? (
          '计划任务会在任务执行前获取检测目标'
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        )}
      </div>
    );
  };

  render() {
    return (
      <div className={cn('task-mange-target-card', this.props.className)}>
        <div className="title">
          <span className="name">{this.props.name}</span>
          <span
            className="show-more"
            onClick={() => this.setState({ moreModalVisible: true }, this.props.loadMore)}
          >
            查看更多
          </span>
        </div>
        <div className="items">
          {_.isEmpty(this.props.items) ? this.renderEmpty() : this.renderItems()}
        </div>
        <Modal
          maskClosable={false}
          visible={this.state.moreModalVisible}
          title={this.props.name}
          onCancel={() => this.setState({ moreModalVisible: false })}
          className={cn(
            'more-target-modal',
            'no-header-bottom-lines',
            'bottom-center',
            'padding-24'
          )}
          footer={[
            <Button
              type="primiary"
              key="close"
              onClick={() => this.setState({ moreModalVisible: false })}
            >
              关闭
            </Button>
          ]}
        >
          <Spin spinning={Boolean(this.props.loadingMore)} tip="加载中">
            <div className="items">
              {_.isEmpty(this.props.moreItems) ? this.renderEmpty() : this.renderMoreItems()}
            </div>
          </Spin>
        </Modal>
      </div>
    );
  }
}
export default TargetCard;
